<template>
  <div>
    <div class="value">
      <router-view></router-view>
    </div>
    <div class="nav">
      <router-link to="/study" 
        :class="{'on': index===0}" @click="setOn(0)">
        学习
      </router-link>
      <router-link to="/home" 
        :class="{'on': index===1}" @click="setOn(1)">
        我的
      </router-link>
      <router-link to="/find" 
        :class="{'on': index===2}" @click="setOn(2)">
        发现
      </router-link>
    </div>
  </div>
</template>

<script>
let timer

export default {
  components: {},
  props: {},
  data () {
    return {
      navigate: "div",
      index: this.$store.state.index
    }
  },
  watch:{},
  methods: {
    setOn(index){
      this.index = index
      this.$store.state.index = index
    }
  },
  mounted(){
    this.index = this.$store.state.index
    timer = setInterval(()=>{
      this.index = this.$store.state.index
    }, 100)
  },
  beforeMount(){
    clearInterval(timer)
  }
}
</script>
<style scoped>
.nav{
  display: flex;
  justify-content: space-between;
  position:absolute;
  font-size: 3vh;
  bottom: 1vh;
  line-height: 6vh;
  padding: 5px 30px;
  box-sizing: border-box;
  left: 0;
  width: 100%;
}
a{
  background-color: aquamarine;
  font-size: 2vh;
  padding: 0px 20px;
  border-radius: 15px;
}
.on{
  background-color: rgb(49, 169, 169);
}
</style>


